<template>
  <view class="phone-container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="wifi-icon">📱</view>
      <view class="title">验证手机号</view>
      <view class="subtitle">请输入您的手机号码以继续认证</view>
    </view>
    
    <!-- 手机号输入区域 -->
    <view class="phone-input-area">
      <view class="input-label">手机号码</view>
      <view class="input-box">
        <view class="country-code">+86</view>
        <input 
          class="phone-input"
          type="number"
          maxlength="11"
          placeholder="请输入11位手机号"
          v-model="phoneNumber"
          @input="onPhoneInput"
          @blur="validatePhone"
        />
        <view class="clear-btn" v-if="phoneNumber" @tap="clearPhone">✕</view>
      </view>
      <view class="input-tips" :class="{ error: phoneError }">
        {{ phoneError || '我们将向此号码发送验证码' }}
      </view>
    </view>
    
    <!-- 用户信息展示 -->
    <view class="user-info" v-if="userInfo.nickName">
      <view class="avatar-area">
        <image :src="userInfo.avatarUrl" class="user-avatar" v-if="userInfo.avatarUrl" />
        <view class="default-avatar" v-else>👤</view>
      </view>
      <view class="user-details">
        <view class="user-name">{{ userInfo.nickName }}</view>
        <view class="auth-tip">已完成微信授权</view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="action-area">
      <button 
        class="submit-btn"
        :disabled="!isPhoneValid || submitting"
        @tap="submitPhone"
      >
        {{ submitting ? '发送中...' : '发送验证码' }}
      </button>
    </view>
    
    <!-- 温馨提示 -->
    <view class="tips-area">
      <view class="tips-title">温馨提示</view>
      <view class="tips-content">
        <text>• 验证码将通过短信发送到您的手机</text>
        <text>• 请确保手机号码输入正确</text>
        <text>• 如未收到验证码，请检查网络或稍后重试</text>
        <text>• 手机号仅用于本次认证，我们不会保存</text>
      </view>
    </view>
    
    <!-- 底部操作 -->
    <view class="footer">
      <button class="back-btn" @tap="goBack">返回重新观看</button>
    </view>
  </view>
</template>

<script>
import { submitPhoneNumber } from '@/api/wifi/auth'

export default {
  name: 'PhoneInput',
  data() {
    return {
      deviceId: '',
      sessionId: '',
      userInfo: {},
      phoneNumber: '',
      phoneError: '',
      submitting: false
    }
  },
  computed: {
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phoneNumber)
    }
  },
  onLoad(options) {
    console.log('Phone页面参数：', options)
    this.deviceId = options.deviceId || ''
    this.sessionId = options.sessionId || ''
    
    // 获取用户信息
    try {
      const userInfo = options.userInfo ? JSON.parse(decodeURIComponent(options.userInfo)) : {}
      this.userInfo = userInfo
    } catch (error) {
      console.error('解析用户信息失败：', error)
    }
    
    if (!this.deviceId || !this.sessionId) {
      uni.showToast({
        title: '参数错误',
        icon: 'error'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    // 手机号输入事件
    onPhoneInput(e) {
      this.phoneNumber = e.detail.value
      this.phoneError = ''
    },
    
    // 验证手机号
    validatePhone() {
      if (!this.phoneNumber) {
        this.phoneError = '请输入手机号码'
        return false
      }
      
      if (this.phoneNumber.length !== 11) {
        this.phoneError = '请输入11位手机号码'
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        this.phoneError = '请输入正确的手机号码'
        return false
      }
      
      this.phoneError = ''
      return true
    },
    
    // 清空手机号
    clearPhone() {
      this.phoneNumber = ''
      this.phoneError = ''
    },
    
    // 提交手机号
    async submitPhone() {
      if (!this.validatePhone()) {
        return
      }
      
      if (this.submitting) {
        return
      }
      
      try {
        this.submitting = true
        
        const submitData = {
          sessionId: this.sessionId,
          deviceId: this.deviceId,
          phoneNumber: this.phoneNumber,
          userInfo: this.userInfo
        }
        
        console.log('提交手机号：', submitData)
        const response = await submitPhoneNumber(submitData)
        
        if (response.code === 200) {
          uni.showToast({
            title: '验证码已发送',
            icon: 'success'
          })
          
          // 跳转到验证码页面
          setTimeout(() => {
            uni.navigateTo({
              url: `/pages/wifi/verify/index?sessionId=${this.sessionId}&deviceId=${this.deviceId}&phoneNumber=${this.phoneNumber}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
            })
          }, 1000)
        } else {
          throw new Error(response.msg || '发送验证码失败')
        }
      } catch (error) {
        console.error('提交手机号失败：', error)
        uni.showToast({
          title: error.message || '发送失败，请重试',
          icon: 'error'
        })
      } finally {
        this.submitting = false
      }
    },
    
    // 返回广告页
    goBack() {
      uni.showModal({
        title: '确认返回',
        content: '返回后需要重新观看广告，是否继续？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  color: #fff;
  margin-bottom: 80rpx;
}

.wifi-icon {
  font-size: 120rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

.phone-input-area {
  margin-bottom: 60rpx;
}

.input-label {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.input-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 16rpx;
}

.country-code {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
  padding-right: 20rpx;
  border-right: 2rpx solid #e0e0e0;
}

.phone-input {
  flex: 1;
  height: 100rpx;
  font-size: 32rpx;
  color: #333;
  background: transparent;
  border: none;
}

.clear-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.input-tips {
  color: #fff;
  font-size: 24rpx;
  opacity: 0.8;
  padding-left: 10rpx;
  
  &.error {
    color: #ff4757;
    opacity: 1;
  }
}

.user-info {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
}

.avatar-area {
  margin-right: 30rpx;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border: 4rpx solid #fff;
}

.default-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50rpx;
  border: 4rpx solid #fff;
}

.user-details {
  flex: 1;
  color: #fff;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.auth-tip {
  font-size: 24rpx;
  opacity: 0.8;
}

.action-area {
  margin-bottom: 60rpx;
}

.submit-btn {
  width: 100%;
  height: 100rpx;
  background: #fff;
  color: #667eea;
  border: none;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  
  &:disabled {
    background: #ccc;
    color: #999;
  }
  
  &::after {
    border: none;
  }
}

.tips-area {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.tips-title {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.tips-content {
  text {
    display: block;
    color: #fff;
    font-size: 24rpx;
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 8rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.footer {
  margin-top: auto;
  text-align: center;
}

.back-btn {
  width: 300rpx;
  height: 70rpx;
  background: transparent;
  color: #fff;
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  border-radius: 35rpx;
  font-size: 28rpx;
  
  &::after {
    border: none;
  }
}
</style> 